<!--发布项目-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Language" content="zh-CN"/>
    <script type="text/javascript" th:src="@{/js/jquery1.4.js}"></script>
    <script type="text/javascript" th:src="@{/js/bioV4.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.lazyload.mini.js}"></script>
    <title>发布项目</title>
    <meta name="Keywords" content="投资机构"/>
    <meta name="Description" content="投资机构"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <link rel="stylesheet" type="text/css" th:href="@{/style/basic.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/style/show.css}"/>
    <script type="text/javascript" th:src="@{/js/function.js}"></script>
    <script type="text/javascript" th:src="@{/js/list.js}"></script>
    <script type="text/javascript" th:src="@{/js/borsertocss.js}"></script><!-- 判断在IE9以下浏览器中根据像素的不同而设置的样式 -->
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/base.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
    <style type="text/css">
        .input-file{position: relative;overflow: hidden;text-align: center; width: auto; color: green; background-color: #fff; }
        .input-file input[type="file"]{ position: absolute; top: 0; right: 0; height: 40px; opacity: 0;}
    </style>

</head>

<style type="text/css">
    #pc_nav ul li:hover div{
        display: inline-block;
    }
    #pc_nav ul li div{
        display: none;
        border-radius:2px;
        width: 200px;
    }
    #pc_nav ul li #di2{
        width:200px;
        height: 280px;
        background-color: white;
    }

    #pc_nav ul li #di2 a{
        /*text-decoration: none;*/
        list-style: none;
        height: 10px;
        width: 200px;
        margin-top: 5px;
        color: lightgrey;
        border:0px solid gainsboro;
        line-height:5px;
        width: 80%;
        text-align: center;
        display:block;
        font-size: 18px;
        margin-bottom: 20px;
        text-align: center;
        z-index: 9999;
    }
</style>
<body>

<!--头部代码开始-->

<div class="navbar navbar-fixed-top" style="_position: relative;_z-index: 10000;">
    <!--nav-->
    <nav id="pc_nav" class="container clearfix hidden-xs" style="background-color: white;"
         th:each="codeUser:${codeUsers}">
        <a href="http://www.baidu.com" th:href="@{/logged/loginIndex(userNo=${codeUser.userNo})}" class="fl mt10">
            <img th:src="@{/images/codeLogo.jpg}" width="120px" height="70px">
        </a>
        <ul class="fr clearfix">
            <li>
                <a href="http://www.baidu.com" th:href="@{/logged/loginIndex(userNo=${codeUser.userNo})}">首页</a></li>
            <li><span>|</span></li>
            <li><a href="#" th:href="@{/item/loginItemsList(userNo=${codeUser.userNo})}">项目</a></li>
            <li><span>|</span></li>
            <li>
            <span th:switch="${codeUser.type}">
                    <span th:case="1">
                      <a href="#" th:href="@{/item/releaseProject(userNo=${codeUser.userNo})}">  项目发布</a>
                    </span>
                    <span th:case="2">
                       <a href="#">暂无</a>
                    </span>
            </span>
            </li>
            <li><span>|</span></li>
            <li><a href="#" th:href="@{/help}">帮助</a></li>

            <li class="div2" style="width: 250px;text-align: center" >
                <span><a href="#"><img th:src="@{'/article/'+ ${codeUser.image}}"  height="60px" width="60px"></a></span>
                <div id="di2" class="div2x" style="z-index: 90;margin-top: 2px;">
                    <p><a style="width: 200px;text-decoration: none" th:text="'hello，'+${codeUser.nickName}">hello，xxx</a></p>
                    <hr />
                    <p><a style="width: 200px" th:href="@{/logged/userInformation(userNo=${codeUser.userNo})}">个人中心</a></p>
                    <hr />
                    <p><a style="width: 200px" th:href="@{/logged/moneyPay(userNo=${codeUser.userNo})}">我的开发宝</a></p>
                    <hr />
                    <p><a style="width: 200px" th:href="@{/item/myCollection(userNo=${codeUser.userNo})}">我收藏的项目</a></p>
                    <hr />
                    <p><a th:href="@{/logged/advise(userNo=${codeUser.userNo})}">我要建议</a></p>
                    <hr />
                    <p><a th:href="@{/}" style="width: 200px">退出登录</a></p>
                </div>
            </li>

        </ul>
    </nav>
</div>

<!--头部代码结束-->

<div class="container pb-15" style="margin-top: 150px">
    <!-- Example row of columns -->
    <div class="row">
        <div class="span12">

            <div class="label-div b-30 border-all pt-5 t-20" style="position: relative; padding-left: 0;">
                <span th:each="codeUser:${codeUsers}">
                <form class="layui-form" th:action="@{/item/releaseProject1(userNo=${codeUser.userNo})}" method="post" enctype="multipart/form-data" >
                    <div class="layui-form-item">
                        <div style="margin: 30px 0px 0px 60px;font-size: large;"><b>选择您的开发类型</b></div>
                        <div class="layui-input-block">
                            <br>
                            <input type="radio" name="project" value="1" title="Web网站" checked="checked">
                            <input type="radio" name="project" value="2" title="App开发">
                            <input type="radio" name="project" value="3" title="微信公众号" >
                            <input type="radio" name="project" value="4" title="小程序" >
                            <input type="radio" name="project" value="5" title="HTML应用">
                            <input type="radio" name="project" value="6" title="其它项目" >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div style="margin: 30px 0px 0px 60px;font-size: large;"><b>选择您招募的开发者类型</b></div>
                        <div class="layui-input-block">
                            <br>
                            <input type="radio" name="needType" value="2" title="招募团队">
                            <br>
                            <hr/>
                            <input type="radio" name="needType" value="1" title="招募个人" checked="">
                            <br>
                        </div>
                    </div>

                    <div class="layui-form-item">
                    <label class="layui-form-label"><font size="4">项目名称</font></label>
                    <div class="layui-input-block">
                        <input type="text" name="itemName" lay-verify="itemName" autocomplete="off" placeholder="请输入5-30个字符"
                               class="layui-input"
                               style="height: 30px;width: 500px;">
                    </div>
                </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">项目图片</font></label>
                        <div class="layui-input-block">

                <p>
                <input type="file" id="xdaTanFileImg" name="itemImage" onchange="xmTanUploadImg(this)" accept="image/*"/>
                <input type="button" value="隐藏图片" onclick="document.getElementById('xmTanImg').style.display = 'none';"/>
                <input type="button" value="显示图片" onclick="document.getElementById('xmTanImg').style.display = 'block';"/>
            </p>
            <img id="xmTanImg"/>
            <div id="xmTanDiv"></div>


                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">项目预算</font></label>
                        <div class="layui-input-block">
                            <input type="text" name="money" lay-verify="money" autocomplete="off"
                                   placeholder="项目金额不得超出￥1,000,000.00" class="layui-input"
                                   style="height: 30px;width: 280px;" >&nbsp;<font size="5">元</font>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">期望交付周期</font></label>
                        <div class="layui-input-block">
                            <input type="text" name="day" lay-verify="day" autocomplete="off" placeholder="请输入交付周期,至少为3天"
                                   class="layui-input"
                                   style="height: 30px;width: 280px;">&nbsp;<font size="5" >天</font>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label"><font size="4">项目描述</font></label>
                        <div class="layui-input-block">
                            <textarea maxlength="500" placeholder="请尽量详细描述您的项目，以吸引更多有相关开发经验的开发者报名（20个字符以上）"
                                      name="text"  lay-verify="text" class="layui-textarea"
                                      style="width: 520px;"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label"><font size="4">相关文档（选填）</font></label>
                        <div class="layui-input-block">
                            <input type="file" multiple="multiple" id="test" name="demandDocument"
                                   style="margin-top: 20px; margin-left:40px ;">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label"><font size="4">招募要求</font></label>
                        <div class="layui-input-block">
                            <textarea maxlength="500" placeholder="您可以对开发者所在地区、从事行业、擅长技能等方面提出要求" class="layui-textarea"
                                      name="itemNeedText"  lay-verify="itemNeedText"    style="width: 520px;"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div style="margin-left: 15px;"><font size="5">联系信息</font></div>
                        <br/>
                        <div style="float: left;    ">
                        <div class="layui-input-block">
                            <font size="4">邮箱</font>
                            <input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="您的邮箱"
                                   class="layui-input"
                                   style="height: 30px;width: 280px;">
                        </div>
                        <div class="layui-input-block">
                            <font size="4">手机</font>
                            <input type="text" name="phoneNum" lay-verify="phoneNum" autocomplete="off" placeholder="您的手机"
                                   class="layui-input"
                                   style="height: 30px;width: 280px;">
                        </div>
                        </div>
                    </div>

                    <div class="layui-input-block" style="margin-left: 360px;">
                        <input type="checkbox" name="like1[write]" lay-skin="primary" >
                        我同意遵守<a href="#"><font color="#006CDC">《码虫用户权责条款》</font></a>
                    </div>


                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin-left: 400px;">
                            <input type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" style="width: 100px;" value="发布"/>

                        </div>
                    </div>
                </form>
                </span>
            </div>


        </div>


        <!--右侧代码-->
        <div class="span4" style=" position:fixed; right:100px; top:150px;">
            <div class="label-div t-20 border-all" >
                <div class="l-15">
                    <h3 class="label-title border-b b-15 small clearfix" style="padding-bottom: 14px;">码市提醒</h3>
                </div>
                <div class="label-main tody-hot l-15">
                    <div>越详细的需求描述可以获得越多的开发者关注，您可参考以下的建议：</div>
                    <ul>
                        <li><a href=""><font color="#006CDC">如何给项目估价？</font></a></li>
                        <li><a href=""><font color="#006CDC">团队项目和个人项目的区别？</font></a></li>
                        <li><a href=""><font color="#006CDC">项目发布后如何查看报名者信息？</font></a></li>
                        <li><a href=""><font color="#006CDC">确定人选后如何启动项目？</font></a></li>
                    </ul>
                    <div>
                        更多指引请查看<a href=""><font style="text-decoration: underline;">帮助中心</font></a><br>
                        如有疑问请<a href=""><font style="text-decoration: underline;">联系客服</font></a><br>
                        或<a href=""><font style="text-decoration: underline;">邮件反馈</font></a>
                    </div>
                </div>
            </div>
        </div>
        <!--右侧代码结束-->


    </div>
</div>


</div>






<script th:src="@{/layui/dist/layui.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->


<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

       // 项目名称
        form.verify({
            itemName: function (value) {
                if (value.length < 5) {
                    return '项目名称至少得5个字符';
                }
                else if(value.length >30){
                    return '项目名称最多30个字符';
                }
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
       // 自定义验证规则 项目预算
        form.verify({
                money: function (value) {
                    if(Math.floor(value) == value)
                    {
                        if (value.length == 0) {
                            return '项目预算不能为空';
                        }
                        else if (value < 100)
                            return '项目预算至少为100元';
                        else if (value > 1000000)
                            return '项目预算不能超过100万元';
                    }
                    else return '请输入正确的字符';
                }
            , content: function (value) {
            layedit.sync(editIndex);
        }
        });

        // 自定义验证规则 项目周期
        form.verify({
            day: function (value)
            {
                if(value.length==0)
                return '项目周期不能为空';
                var ex = /^\d+$/;
                if (!ex.test(value)) {
                    return '项目周期需为整数天';
                }
                else if(value <3)
                    return '项目周期至少为3天';
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        // 自定义验证规则 项目描述
        form.verify({
            text: function (value)
            {
                if(value.length==0)
                    return '项目描述不能为空';
               if(value.length > 500)
                   return '项目描述不能超出500个字符';
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        // 自定义验证规则 项目招募描述
        form.verify({
            itemNeedText: function (value)
            {
                if(value.length==0)
                    return '招募要求不能为空';
                if(value.length > 500)
                    return '招募要求不能超出500个字符';
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        // 自定义验证规则 邮箱
        form.verify({
            email: function (value)
            {
                if(value.length==0)
                    return '邮箱不能为空';
                var myforms=document.forms;
                var myemail=myforms[0].email.value;
                var myReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;

                if(!myReg.test(value))
                    return '请输入正确的邮箱格式';
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        // 自定义验证规则 手机号
        form.verify({
            phoneNum: function (value)
            {
                if (value.length==0)
                    return '手机号不能为空';
                var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
                if (!myreg.test(value))
                {
                    return '请输入正确的手机号格式';
                }
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        /* if(document.getElementById("xy").checked){
         alert("checkbox is checked");
     }*/
        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        // //监听提交
        // form.on('submit(demo1)', function (data) {
        //     layer.alert(JSON.stringify(data.field), {
        //         title: '最终的提交信息'
        //     })
        //     return false;
        // });

    });

</script>



<script type="text/javascript">


</script>


<script type="text/javascript">
    var test = document.getElementById('test');
    test.addEventListener('change', function () {
        var t_files = this.files;
        var str = '';
        for (var i = 0, len = t_files.length; i &lt; len; i++) {
            console.log(t_files[i]);
            str += '&lt;a href="javascript:void(0)">' + t_files[i].name + '&lt;/a>&lt;br/>';
        }
        ;
        document.getElementById('content').innerHTML = str;
    }, false);
</script>
<!--
<script>
    $("#file0").change(function()
    {
        var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
	 console.log("objUrl = "+objUrl);
	 if (objUrl)
	 {
	     $("#img0").attr("src", objUrl);
	 }
    })    ;
    function getObjectURL(file)
    {
        var url = null;
        if (window.createObjectURL!=undefined)
        {
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined)
        { // mozilla(firefox)
     url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined)
        { // webkit or chrome
             	  url = window.webkitURL.createObjectURL(file) ;
        }  		 return url ;
    }
</script>-->

<script type="text/javascript">

    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var file = obj.files[0];

        console.log(obj);console.log(file);
        console.log("file.size = " + file.size);  //file.size 单位为byte

        var reader = new FileReader();

        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");

            var img = document.getElementById("xmTanImg");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }

        reader.readAsDataURL(file)
    }
</script>


</body>
</html>